<template>
	<view>
		<view class="title-class-box">
			<view class="title-class-view">价格</view>
			<view class="title-unit-class">(万元)</view>
		</view>
		<sortCar :data="priceDataList" :name="sortName" @sortItemtap='sortItemtap' v-if="isShowList"></sortCar>
		<!-- <slider-range :value="rangeValue" :min="rangeMin" :max="rangMax" :step="5" :bar-height="3" :block-size="26"
			background-color="#EEEEF6" active-color="#0B5AE9" :format="format"
			@change="handleRangeChange"></slider-range> -->
		<view class="btn_class" @tap="btn_confirm()">确定</view>
	</view>
</template>

<script>
	import sortCar from '@/secondhandCar/sortCar/sortCar.vue';
	import {getPriceWhere} from '@/api/secondhandCar.js'
	export default {
		components: {
			sortCar
		},
		name: "price-age-selected",
		props: {
			/**
			 * 
			 * 
			 */
			selectedName: {
				type: String,
				default: '不限价格'
			},
			priceDataList:{
				type: Array,
				default: []
			}
		},
		data() {
			return {
				title: '',
				rangeMin: 0,
				rangMax: 80,
				rangeValue: [0, 80],
				sortName: '不限价格',
				sortDataList: [],
				isShowList:true,
				start:0,
				end:0
			}
		},
		beforeMount() {
			this.sortName = this.selectedName
			console.log('准备开始挂在页面元素====' + this.sortName);
		},
		beforeUpdate() {
			// this.sortName = selectedName
			this.$utils.log('组件数据发生变化' + this.sortName)
			
		},
		beforeCreate() {
			
		},
		methods: {
			format(val) {
				this.$utils.log("打印" + JSON.stringify(val))
				return val
			},
			handleRangeChange(e) {
				this.rangeValue = e
				this.$utils.log("打印 handleRangeChange " + JSON.stringify(e))
			},
			sortItemtap(item) {
				this.sortName = item.name
				this.$utils.log(JSON.stringify(item))
				this.start = item.start
				this.end = item.end
				switch (item.title + "") {
					case "1": {

						break;
					}
					case "2": {

						break;
					}
					case "3": {

						break;
					}
					case "4": {

						break;
					}
					case "5": {

						break;
					}
					case "6": {

						break;
					}
					case "7": {

						break;
					}
					case "8": {

						break;
					}
				}
			},
			btn_confirm() {
				this.$emit('btn_confirmPrice', this.start,this.end, this.sortName)
			}
		}
	}
</script>

<style>
	.title-class-box {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 10rpx 20rpx;
	}

	.title-unit-class {
		color: #ccc;
		font-size: 28rpx;
		margin-left: 10rpx;
	}

	.btn_class {
		margin: 20rpx 80rpx;
		padding: 20rpx;
		text-align: center;
		background-color: #0B5AE9;
		color: white;
		font-weight: bolder;
		border-radius: 20rpx;
	}
</style>